<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="setItem">setItem</button>
  <button id="getItem">getItem</button>
  <button id="removeItem">removeItem</button>
  <button id="clear">clear</button>

  <script>
    const KEY = 'data'

    /**
     * sessionStorage
     *  ● window.sessionStorage
     *  ● 可以保存大约 5Mb 数据
     *  ● 数据保存在内存，页面窗口关闭后数据消失
     *  ● 在同一个页面窗口内共享数据
     */
    function setItem() {
      const data = 'Hello world!'
      // 保存数据
      sessionStorage.setItem(KEY, data)
    }

    function getItem() {
      // 获取数据，默认值 null
      const data = sessionStorage.getItem(KEY)
      console.log('getItem', data)
    }

    function removeItem() {
      // 删除数据
      sessionStorage.removeItem(KEY)
    }

    function clear() {
      // 删除所有数据
      sessionStorage.clear()
    }

    document.querySelector('#setItem').addEventListener('click', setItem)
    document.querySelector('#getItem').addEventListener('click', getItem)
    document.querySelector('#removeItem').addEventListener('click', removeItem)
    document.querySelector('#clear').addEventListener('click', clear)
  </script>
</body>

</html>